.pure-tabs {
    background: var(--pure-tabs-background, var(--pure-background-element));
    width: var(--pure-tabs-width, 100%);
    height: var(--pure-tabs-height, 100%);
    position: relative;
}

.pure-tabs-horizontal .pure-tabs-items {
    white-space: nowrap;
}

.pure-tabs-vertical .pure-tabs-items {
    white-space: normal;
}

.pure-tabs-scroll-view {
    height: 100%;
    width: 100%;
}

.pure-tabs-list {
    width: 100%;
    height: 100%;
    align-self: stretch;
}

.pure-tabs-items {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--pure-tabs-flex-wrap, nowrap);
    align-items: stretch;
    justify-content: var(--pure-tabs-justify-content);
    position: relative;
    gap: var(--pure-tabs-items-gap);
    margin: var(--pure-tabs-items-margin);
    padding: var(--pure-tabs-items-padding);
    box-sizing: border-box;
    height: 100%;
    align-self: stretch;
}

.pure-tabs-item {
    height: 100%;
}

.pure-tabs-disabled-scroll .pure-tabs-items {
    width: 100%;
    height: 100%;
}

.pure-tabs-vertical .pure-tabs-items {
    flex-direction: column;
    height: auto;
}

.pure-tabs-vertical .pure-tabs-item {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pure-tabs-indicator {
    position: absolute;
    z-index: var(--pure-tabs-indicator-z-index, 2);
    transition-duration: var(--pure-tabs-indicator-transition-duration, 500ms);
    opacity: var(--pure-tabs-indicator-opacity, 1);
    left: var(--pure-tabs-indicator-left);
    top: var(--pure-tabs-indicator-top);
    right: auto;
    bottom: auto;
}

.pure-tabs-horizontal .pure-tabs-indicator {
    transition-property: left;
}

.pure-tabs-horizontal.pure-tabs-indicator-with-animation .pure-tabs-indicator {
    animation-name: pure-tabs-indicator-animate-horizontal;
    animation-duration: var(--pure-tabs-indicator-animation-duration, 500ms);
    animation-timing-function: var(--pure-tabs-indicator-animation-timing-function, ease);
    animation-iteration-count: var(--pure-tabs-indicator-animation-iteration-count, 1);
    animation-direction: var(--pure-tabs-indicator-animation-direction, normal);
    animation-fill-mode: var(--pure-tabs-indicator-animation-fill-mode, forwards);

}

.pure-tabs-vertical .pure-tabs-indicator {
    transition-property: top;
}

.pure-tabs-vertical.pure-tabs-indicator-with-animation .pure-tabs-indicator {
    animation-name: pure-tabs-indicator-animate-vertical;
    animation-duration: var(--pure-tabs-indicator-animation-duration, 500ms);
    animation-timing-function: var(--pure-tabs-indicator-animation-timing-function, ease);
    animation-iteration-count: var(--pure-tabs-indicator-animation-iteration-count, 1);
    animation-direction: var(--pure-tabs-indicator-animation-direction, normal);
    animation-fill-mode: var(--pure-tabs-indicator-animation-fill-mode, forwards);
}

.pure-tabs-indicator::after {
    content: "";
    position: absolute;
    display: block;
    background: var(--pure-tabs-indicator-background, var(--pure-tabs-theme, var(--pure-theme-primary)));
    border-radius: var(--pure-tabs-indicator-border-radius, 4px);
    box-sizing: border-box;
    opacity: 0;
}

.pure-tabs-horizontal .pure-tabs-indicator::after {
    width: var(--pure-tabs-bar-width, 1em);
    height: var(--pure-tabs-bar-height, 4px);
    left: 50%;
    transform: translate(-50%, -100%);
}

.pure-tabs-vertical .pure-tabs-indicator::after {
    width: var(--pure-tabs-bar-width, 4px);
    height: var(--pure-tabs-bar-height, 1em);
    top: 50%;
    transform: translate(0, -50%);
}

.pure-tabs-indicator-initialization .pure-tabs-indicator::after {
    opacity: 1;
}

@keyframes pure-tabs-indicator-animate-horizontal {
    0% {
        transform: scaleX(1) translate(-50%, -100%);
        transform-origin: left center;
    }

    50% {
        transform: scaleX(var(--pure-tabs-indicator-scale-multiple, 1.5)) translate(-50%, -100%);
        transform-origin: center center;
    }

    100% {
        transform: scaleX(1) translate(-50%, -100%);
        transform-origin: right center;
    }
}

@keyframes pure-tabs-indicator-animate-vertical {
    0% {
        transform: scaleY(1) translate(0, -50%);
        transform-origin: top center;
    }

    50% {
        transform: scaleY(var(--pure-tabs-indicator-scale-multiple, 1.5)) translate(0, -50%);
        transform-origin: center center;
    }

    100% {
        transform: scaleY(1) translate(0, -50%);
        transform-origin: bottom center;
    }
}